<template>
  <div>
    <el-button type='primary' @click='loadList'>加载List组件</el-button>
    <el-button @click="show = false">v-if 隐藏List组件</el-button>

    <div>
      <list v-if='show' :list='list'></list>
      <Say v-if='show'></Say>

      <AsyncList v-if='show' :list='list'></AsyncList>
    </div>
  </div>
</template>

<script>
import loadingComponet from './loadingComponet'
import errorComponent from './errorComponent'

// 异步组件工厂函数
const AsyncList = () => {
  return {
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import(/* webpackChunkName: 'AsyncList'*/ './List.vue'),
    // 异步组件加载时使用的组件
    loading: loadingComponet,
    // 加载失败时使用的组件
    error: errorComponent,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 2000,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 2100
  }
}

export default {
  name: 'index',
  components: {
    List: () => import('./List.vue'),
    AsyncList: AsyncList,
    Say: () => import(/* webpackChunkName: "say-componet" */'./Say.vue')
  },
  data() {
    return {
      list: [],
      show: false
    }
  },
  methods: {
    loadList() {
      this.list = ['动态加载的数据', '是的', '这里的List组件一开始没有加载']
      this.show = true
    }
  }
}
</script>
